﻿@{
    ViewBag.Title = "Binding3";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<ol class="breadcrumb">
    <li><a href="/Home/Home">Home</a></li>
    <li><a href="/KnockoutJs/Introduction">KnockOut JS</a></li>
    <li class="active">Binding-Working with form fields</li>
</ol>
<div class="bottomspace">
    <h1 class="text-left">Binding-Working with form fields</h1>
</div>
<div id="click" class="bottomspace">
    <h3>The 'click' binding</h3>
    <h4>Purpose</h4>
    <p>
        The click binding adds an event handler so that your chosen JavaScript function will be invoked when the
        associated DOM element is clicked. This is most commonly used with elements like button, input, and a,
        but actually works with any visible DOM element.
    </p>
    <h3>Example</h3>
    <div class="divcolor">
        <pre><code>&lt;div&gt;
You've clicked &lt;span data-bind="text: numberOfClicks"&gt;&lt;/span&gt; times
&lt;button data-bind="click: incrementClickCounter"&gt;Click me&lt;/button&gt;
&lt;/div&gt;</code></pre>
    </div>
    <p>
        Each time you click the button, this will invoke incrementClickCounter() on the view model, which in turn
        changes the view model state, which causes the UI to update.
    </p>

    <div class="divcolor">
        <pre><code>&lt;script type="text/javascript"&gt;
    var viewModel = {
        numberOfClicks: ko.observable(0),
        incrementClickCounter: function () {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
&lt;/script&gt;</code></pre>
    </div>
    <p>
        The function you want to bind to the element’s click event.
        You can reference any JavaScript function - it doesn’t have to be a function on your view
        model. You can reference a function on any object by writing click:
        someObject.someFunction.
    </p>
    <p>
        By default, Knockout will prevent the click event from taking any default action. This means that if you use
        the click binding on an a tag (a link), for example, the browser will only call your handler function and
        will not navigate to the link’s href. This is a useful default because when you use the click binding, it’s
        normally because you’re using the link as part of a UI that manipulates your view model, not as a regular
        hyperlink to another web page.
        However, if you do want to let the default click action proceed, just return true from your click handler
    </p>


</div>
<div class="bottomspace" id="event">
    <h3>The "event" binding</h3>
    <h4>Purpose</h4>
    <p>
        The event binding allows you to add an event handler for a specified event so that your chosen JavaScript
        function will be invoked when that event is triggered for the associated DOM element. This can be used to
        bind to any event, such as keypress, mouseover or mouseout.
    </p>
    <h3>Example</h3>
    <div class="divcolor">
        <pre><code>&lt;div&gt;
&lt;div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"&gt;
44  Part III: Using built-in bindings
Mouse over me
&lt;/div&gt;
&lt;div data-bind="visible: detailsEnabled"&gt;
Details
&lt;/div&gt;
&lt;/div&gt;</code></pre>
    </div>
    <p>
        Now, moving your mouse pointer on or off of the first element will invoke methods on the view model to
        toggle the detailsEnabled observable. The second element reacts to changes to the value
        of detailsEnabled by either showing or hiding itself.
    </p>
    <div class="divcolor">
        <pre><code>&lt;script type="text/javascript"&gt;
    var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails: function () {
            this.detailsEnabled(true);
        },
        disableDetails: function () {
            this.detailsEnabled(false);
        }
    };
    ko.applyBindings(viewModel);
&lt;/script&gt;</code></pre>
    </div>
    <p>
        You should pass a JavaScript object in which the property names correspond to event
        names, and the values correspond to the function that you want to bind to the event.
    </p>
    <p>
        In your viewmodel, it’s often useful to declare self (or some other variable) as an alias for this.
        Doing so avoids any problems with this being redefined to mean something else in event handlers
        or Ajax request callbacks.
    </p>
    <p>
        Knockout will prevent the event from taking any default action. For example if you use
        the eventbinding to capture the keypress event of an input tag, the browser will only call your handler
        function and willnot add the value of the key to the input element’s value. A more common example is
        using the click binding, which internally uses this binding, where your handler function will be called, but
        the browser will not navigate to the link’s href. This is a useful default because when you use
        the click binding, it’s normally because you’re using the link as part of a UI that manipulates your view
        model, not as a regular hyperlink to another web page.
    </p>

</div>
<div class=" bottomspace" id="submit">
    <h3>The "submit" binding</h3>
    <h4>Purpose</h4>
    <p>
        The submit binding adds an event handler so that your chosen JavaScript function will be invoked when
        the associated DOM element is submitted. Typically you will only want to use this on form elements.
        When you use the submit binding on a form, Knockout will prevent the browser’s default submit action for
        that form. In other words, the browser will call your handler function but will not submit the form to the
        server.
    </p>
    <p>
        This is a useful default because when you use the submit binding, it’s normally because you’re
        using the form as an interface to your view model, not as a regular HTML form. If you do want to let the
        form submit like a normal HTML form, just return true from your submit handler.
    </p>
    <h3>Example</h3>
    <div class="divcolor">
        <pre><code>&lt;form data-bind="submit: doSomething"&gt;
&lt;button type="submit"&gt;Submit&lt;/button&gt;<br />&lt;/div&gt;</code></pre>
    </div>
    <p>The function you want to bind to the element’s submit event.</p>
    <div class="divcolor">
        <pre><code>&lt;script type="text/javascript"&gt;
    var viewModel = {
        doSomething: function (formElement) {
        }
    };
&lt;/script&gt;</code></pre>
    </div>
</div>
<div class="bottomspace" id="enable">
    <h3>The 'enable' binding</h3>
    <h4>Purpose</h4>
    <p>
        The enable binding causes the associated DOM element to be enabled only when the parameter value is
        true. This is useful with form elements like input, select, and textarea.
    </p>
    <h3>Example</h3>
    <div class="divcolor">
        <pre><code>&lt;p&gt;
&lt;input type='checkbox' data-bind="checked: hasCellphone" /&gt;
I have a cellphone
&lt;/p&gt;
&lt;p&gt;
Your cellphone number:
&lt;input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" /&gt;
&lt;/p&gt;</code></pre>
    </div>
    <p>
        In this example, the “Your cellphone number” text box will initially be disabled. It will be enabled only
        when the user checks the box labelled “I have a cellphone”
    </p>
    <div class="divcolor">
        <pre><code>&lt;script type="text/javascript"&gt;
    var viewModel = {
        hasCellphone: ko.observable(false),
        cellphoneNumber: ""
    };
&lt;/script&gt;</code></pre>
    </div>
    <p>A value that controls whether or not the associated DOM element should be enabled.</p>
    <a href="#">Live Demo</a>
</div>
<div class="bottomspace" id="disable">
    <h3>The 'disable' binding</h3>
    <h4>Purpose</h4>
    <p>
        The disable binding causes the associated DOM element to be disabled only when the parameter value is
        true. This is useful with form elements like input, select, and textarea.
    </p>
    <p>
        This is the mirror image of the enable binding. For more information, see documentation for the enable
        binding, because disable works in exactly the same way except that it negates whatever parameter you
        pass to it.
    </p>

</div>
<div class="bottomspace" id="value">
    <h3>The "value" binding</h3>
    <h4>Purpose</h4>
    <p>
        The value binding links the associated DOM element’s value with a property on your view model. This is
        typically useful with form elements such as &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt;.
    </p>
    <p>
        When the user edits the value in the associated form control, it updates the value on your view model.
        Likewise, when you update the value in your view model, this updates the value of the form control on
        screen.
    </p>
    <p>
        If you’re working with checkboxes or radio buttons, use the checked binding to read and write your
        element’s checked state, not the value binding.
    </p>
    <h3>Example</h3>
    <div class="divcolor">
        <pre><code>&lt;p&gt;Login name: &lt;input data-bind="value: userName" /&gt;&lt;/p&gt;
&lt;p&gt;Password: &lt;input type="password" data-bind="value: userPassword" /&gt;&lt;/p&gt;</code></pre>
    </div>
    <div class="divcolor">
        <pre><code>&lt;script type="text/javascript"&gt;
    var viewModel = {
        userName: ko.observable(""),       
        userPassword: ko.observable("abc"),
    };
&lt;/script&gt;</code></pre>
    </div>
    <p>
        KO sets the element’s value property to your parameter value. Any previous value will
        be overwritten.
    </p>
    <p>
        If this parameter is an observable value, the binding will update the element’s value
        whenever the value changes. If the parameter isn’t observable, it will only set the
        element’s value once and will not update it again later.
    </p>
    <p>
        If you supply something other than a number or a string (e.g., you pass an object or an
        array), the displayed text will be equivalent to yourParameter.toString() (that’s usually
        not very useful, so it’s best to supply string or numeric values).
    </p>
    <p>
        Whenever the user edits the value in the associated form control, KO will update the
        property on your view model. By default, KO updates your view model when the user
        transfers focus to another DOM node (i.e., on the change event), but you can control
        when the value is updated using the valueUpdateparameter described below.
    </p>

</div>
<div class="bottomspace" id="hasfocus">
    <h3>The "hasfocus" binding</h3>
    <h4>Purpose</h4>
    <p>
        The hasfocus binding links a DOM element’s focus state with a viewmodel property. It is a two-way
        binding
    </p>
    <ul>
        <li>
            If you set the viewmodel property to true or false, the associated element will become focused or
            unfocused.
        </li>
        <li>
            If the user manually focuses or unfocuses the associated element, the viewmodel property will be
            set to true or false accordingly.
        </li>
    </ul>
    <p>
        This is useful if you’re building sophisticated forms in which editable elements appear dynamically, and
        you would like to control where the user should start typing, or respond to the location of the caret.
    </p>
    <p>
        If multiple elements have hasfocus bindings with associated values set to true, the browser will switch
        focus to whichever element had its hasfocus binding set most recently. So, you can simply write databind="hasfocus: true" if you want to make an element gain focus as soon as it is dynamically inserted into
        the document. This will not prevent the focus from later moving to a different element.
    </p>
    <h3>Example</h3>
    <div class="divcolor">
        <pre><code>&lt;input data-bind="hasfocus: isSelected" /&gt;
&lt;button data-bind="click: setIsSelected"&gt;Focus programmatically&lt;/button&gt;
&lt;span data-bind="visible: isSelected"&gt;The textbox has focus&lt;/span&gt;</code></pre>
    </div>
    <div class="divcolor">
        <pre><code>var viewModel = {
isSelected: ko.observable(false),
setIsSelected: function() { this.isSelected(true) }
};
ko.applyBindings(viewModel);</code></pre>
    </div>
    <a href="#">Live Demo</a>
    <p>
        Pass true (or some value that evaluates as true) to focus the associated element.
        Otherwise, the associated element will be unfocused.
        When the user manually focuses or unfocuses the element, your value will be set
        to true or false accordingly.
        If the value you supply is observable, the hasfocus binding will update the element’s
        focus state whenever that observable value changes.
    </p>
</div>
<div class="bottomspace" id="checked">
    <h3>The "checked" binding</h3>
    <h4>Purpose</h4>
    <p>
        The checked binding links a checkable form control — i.e., a checkbox (&lt;input type='checkbox'&gt;) or a
        radio button (&lt;input type='radio'&gt;) — with a property on your view model.
    </p>
    <p>
        When the user checks the associated form control, this updates the value on your view model. Likewise,
        when you update the value in your view model, this checks or unchecks the form control on screen.
    </p>
    <p>
        For text boxes, drop-down lists, and all non-checkable form controls, use the value binding to read
        and write the element’s value, not the checked binding.
    </p>
    <h3>Example</h3>
    <div class="divcolor">
        <pre><code>&lt;p&gt;Send me spam: &lt;input type="checkbox" data-bind="checked: wantsSpam" /&gt;&lt;/p&gt;</code></pre>
    </div>
    <div class="divcolor">
        <pre><code>&lt;script type="text/javascript"&gt;
    var viewModel = {
        wantsSpam: ko.observable(true) 
    };
   
    viewModel.wantsSpam(false);
&lt;/script&gt;</code></pre>
    </div>
    <a href="#">Live Demo</a>
    <p>
        For checkboxes, KO will set the element to be checked when the parameter value
        is true, and unchecked when it is false. If you give a value that isn’t actually boolean, it
        will be interpreted loosely. This means that nonzero numbers and non-null objects and
        non-empty strings will all be interpreted as true, whereas zero, null, undefined, and
        empty strings will be interpreted as false.
    </p>
    <div class="divcolor">
        <pre><code>&lt;div&gt;&lt;input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /&gt;
Cherry&lt;/div&gt;</code></pre>
    </div>
    <p>Add spanflover into view model becuase we using radio button mean at list some value required</p>
    <div class="divcolor">
        <pre><code>spamFlavor: ko.observable("almond");</code></pre>
    </div>
    <p>
        For <strong>radio buttons</strong>, KO will set the element to be checked if and only if the parameter
        value equals the radio button node’s value attribute. So, your parameter value should be
        a string. In the previous example, the radio button with value="almond" was checked
        only when the view model’sspamFlavor property was equal to "almond".
    </p>
    <p>
        For <strong>checkboxes</strong>, KO will set the element to be checked when the parameter value
        is true, and unchecked when it is false. If you give a value that isn’t actually boolean, it
        will be interpreted loosely. This means that nonzero numbers and non-null objects and
        non-empty strings will all be interpreted as true, whereas zero, null, undefined, and
        empty strings will be interpreted as false.
    </p>
    <p>
        If your parameter is an observable value, the binding will update the element’s checked state
        whenever the value changes. If the parameter isn’t observable, it will only set the element’s
        checked state once and will not update it again later.
    </p>

</div>
<div class="bottomspace" id="option">
    <h3>The "options" binding</h3>
    <h4>Purpose</h4>
    <p>
        The options binding controls what options should appear in a drop-down list (i.e., a &lt;select&gt;
        element) or
        multi-select list (e.g.,
        &lt;select size='6'&gt;
        ). This binding cannot be used with anything other
        than
        &lt;select&gt;elements.
    </p>
    <p>
        The value you assign should be an array (or observable array). The &lt;select&gt;
        element will then display
        one item for each item in your array.
    </p>

    <h3>Example: Drop-down list</h3>
    <div class="divcolor">
        <pre><code>&lt;p&gt;Destination country: &lt;select data-bind="options: availableCountries"&gt;&lt;/select&gt;&lt;/p&gt;</code></pre>
    </div>
    <div class="divcolor">
        <pre><code>&lt;script type="text/javascript"&gt;
    var viewModel = {
        availableCountries : ko.observableArray(['France', 'Germany', 'Spain']) 
    };
    viewModel.availableCountries.push('China');
&lt;/script&gt;</code></pre>
    </div>
    <a href="#">Live Demo</a>
    <h3>Example: Multi-select list</h3>
    <p>
        A multi-select list, to set which of the options are selected, or to read which of the options are
        selected, use the selectedOptions binding. For a single-select list, you can also read and write the
        selected option using the value binding.
    </p>
    <div class="divcolor">
        <pre><code>&lt;p&gt;Choose some countries you'd like to visit: &lt;select data-bind="options: availableCountries" size="5"
                                                      multiple="true"&gt;&lt;/select&gt;&lt;/p&gt;</code></pre>
    </div>
    <div class="divcolor">
        <pre><code>&lt;script type="text/javascript"&gt;
    var viewModel = {
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])
    };
&lt;/script&gt;</code></pre>
    </div>
    <a href="#">Live Demo</a>
    <p>
        When the options binding changes the set of options in your &lt;select&gt;
        element, KO will leave the user’s
        selection unchanged where possible. So, for a single-select drop-down list, the previously selected option
        value will still be selected, and for a multi-select list, all the previously selected option values will still be
        selected (unless, of course, you’re removed one or more of those options).
    </p>
    <p>
        That’s because the options binding tries to be independent of the value binding (which controls selection
        for a single-select list) and the selectedOptions binding (which controls selection for a multi-select list).
    </p>

</div>
<div class="bottomspace" id="selectedoption">
    <h3>The "selectedOptions" binding</h3>
    <h4>Purpose</h4>
    <p>
        The selectedOptions binding controls which elements in a multi-select list are currently selected. This is
        intended to be used in conjunction with a &lt;select&gt; element and the options binding.
    </p>
    <p>
        When the user selects or de-selects an item in the multi-select list, this adds or removes the
        corresponding value to an array on your view model. Likewise, assuming it’s an observable array on your
        view model, then whenever you add or remove (e.g., via push or splice) items to this array, the
        corresponding items in the UI become selected or deselected. It’s a 2-way binding.
    </p>
    <p>
        To control which element in a single-select drop-down list is selected, you can
        use the value bindinginstead.
    </p>
    <h3>Example</h3>
    <div class="divcolor">
        <pre><code>&lt;p&gt;
Choose some countries you'd like to visit: 
&lt;select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5"
        multiple="true"&gt;&lt;/select&gt;
&lt;/p&gt;</code></pre>
    </div>
    <p>It's provide option to user from available city and select from it.</p>
    <div class="divcolor">
        <pre><code>&lt;script type="text/javascript"&gt;
    var viewModel = {
        availableCountries : ko.observableArray(['France', 'Germany', 'Spain']),
        chosenCountries : ko.observableArray(['Germany']) 
    };</code></pre>
    </div>
</div>
<div class="bottomspace" id="uniquename">
    <h3>The "uniqueName" binding</h3>
    <h4>Purpose</h4>
    <p>
        The uniqueName binding ensures that the associated DOM element has a nonempty name attribute. If the
        DOM element did not have a name attribute, this binding gives it one and sets it to some unique string
        value.
    </p>
    <h3>Example</h3>
    <div class="divcolor">
        <pre><code>&lt;input data-bind="value: someModelProperty, uniqueName: true" /&gt;</code></pre>
    </div>
    <p>
        jQuery Validation currently will only
        validate elements that have names. To use this with a Knockout UI, it’s sometimes necessary to apply
        the uniqueName binding to avoid confusing jQuery Validation. See an example of using jQuery Validation
        with KO.
    </p>
    <p>
        Most of the time
        this is irrelevant because your radio button elements will have name attributes to put them into mutuallyexclusive groups. However, just in case you didn’t add a name attribute because it’s unnecessary in your
        case, KO will internally use uniqueName on those elements to ensure they can be checked.
    </p>

</div>

